<template>
  <div class="custom-table">
    <!-- 添加表头 -->
    <div class="table-header">
      <div class="table-header-item" v-for="item in columns" :key="item.dataIndex" :style="getFieldStyle(item)">
        {{ item.title }}
      </div>
    </div>

    <a-spin :spinning="loading" style="width: 100%">
      <div class="order-card-list">
        <template v-if="list.length">
          <div class="order-card-item" v-for="record in list" :key="record.id">
            <a-card :title="cardTitle(record)">
              <template #extra>
                <slot name="extra" :record="record"></slot>
              </template>
              <div class="content-box">
                <template v-for="column in columns" :key="column.dataIndex">
                  <div class="content-field" :style="getFieldStyle(column)">
                    <slot name="bodyCell" :column="column" :record="record">
                      {{ column.customRender ? column.customRender({ text: record[column.dataIndex], record }) : record[column.dataIndex] || '-' }}
                    </slot>
                  </div>
                </template>
              </div>
            </a-card>
          </div>
        </template>
      </div>
      <a-empty :image="simpleImage" v-if="!list.length && !loading" />
    </a-spin>

    <!-- 分页 -->
    <div class="page-box" v-if="list.length">
      <a-pagination v-bind="pagination" :show-total="(total) => `共 ${total} 条`" @change="handleTableChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Empty } from 'ant-design-vue'
  import { computed } from 'vue'

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

  interface Props {
    list: TradeTypes.IResponse[]
    columns: {
      width?: number
      title: string
      dataIndex: string
      customRender?: (data: { text: any; record: any }) => any
    }[]
    loading: boolean
    pagination: {
      total: number
      current: number
      pageSize: number
    }
  }

  defineProps<Props>()

  const cardTitle = computed(() => {
    return (record: TradeTypes.IResponse) => `下单时间：${record.orderTime} 订单编号: ${record.orderNo}`
  })

  const getFieldStyle = (column: Props['columns'][0]) => {
    return {
      flex: column.width ? `0 0 ${column.width}px` : 1,
    }
  }

  const emit = defineEmits<{
    (e: 'change', tabPage: { current: number }): void
  }>()

  const handleTableChange = (current: number) => {
    emit('change', {
      current: current || 1,
    })
  }
</script>

<style lang="less" scoped>
  .custom-table {
    width: 100%;
    padding-bottom: 100px;

    .table-header {
      display: flex;
      align-items: center;
      width: 100%;
      border-radius: 2px 2px 0 0;

      .table-header-item {
        flex: 1;
        padding: 16px;
        overflow-wrap: break-word;
        font-weight: bold;
        background: #f2f3f5;
        position: relative;

        &::before {
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 1.6em;
          background-color: rgb(0 0 0 / 6%);
          transform: translateY(-50%);
          transition: background-color 0.3s;
          content: '';
        }
      }
    }

    .order-card-list {
      min-height: 200px;

      .order-card-item {
        padding-top: 30px;

        ::v-deep(.ant-card-body) {
          padding: 0;
        }
      }

      .content-box {
        display: flex;
        align-items: stretch; // 改为 stretch，让子元素撑满高度
        width: 100%;
        min-height: 80px; // 设置最小高度
      }

      .content-field {
        flex: 1;
        padding: 16px;
        font-weight: bold;
        position: relative;
        border-left: 1px solid rgb(0 0 0 / 6%);
        display: flex; // 添加 flex 布局
        align-items: center; // 垂直居中内容
      }

      .seller-info {
        display: flex;
        align-items: center;
        gap: 12px;

        .seller-detail {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
      }

      .settlement-amount {
        .amount {
          color: #ff4d4f;
          font-weight: bold;
        }
      }

      .action-btns {
        .contact-btn {
          color: #ff4d4f;
        }
      }
    }

    .page-box {
      padding-top: 16px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
